<template>
	<div id="home">
		<nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
		<tab-control 
		class="tab-control-faker" 
		:titles="['流行','新款','精选']" 
		@tabClick="tabClick" 
		ref="tabControlFaker"
		v-show="isTabFixed"></tab-control>

		<scroll class="content" 
				ref="scroll" 
				:probe-type="3"
				@scroll="contentScroll"
				:pull-up-load="true"
				@pullingUp="loadMore">
			<home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
			<recommend-view :recommends="recommends"></recommend-view>
			<feature-view></feature-view>
			<tab-control :titles="['流行','新款','精选']" @tabClick="tabClick" ref="tabControl"></tab-control>
			<goods-list :goods="showGoods"></goods-list>
		</scroll>
		<back-top @click.native="backClick" v-show="isShowBackTop"></back-top>
	</div>
</template>

<script>
// 子组件
	import HomeSwiper from './childcomps/HomeSwiper'
	import RecommendView from './childcomps/RecommendView'
	import FeatureView from './childcomps/FeatureView'

// 公共组件
	import NavBar from 'components/common/navbar/NavBar'
	import TabControl from 'components/content/tabcontrol/TabControl'
	import GoodsList from 'components/content/goods/GoodsList'
	import Scroll from 'components/common/scroll/Scroll'
	
// 方法对象
	import {getHomeMultiData, getHomeGoods} from 'network/home'
	import {itemImgListenerMixin,backTopMixin} from 'common/mixin'

	export default {
		name: 'Home',
		components: {
			HomeSwiper,
			RecommendView,
			FeatureView,
			NavBar,
			TabControl,
			GoodsList,
			Scroll,
			
		},
		mixins: [itemImgListenerMixin,backTopMixin],
		data() {
			return {
				banners: [],//轮播图数据
				recommends: [],//推荐数据
				goods: {//商品列表数据
					pop: {page: 0, list: []},//流行列表数据，page=当前页数，list=数据列表
					new: {page: 0, list: []},//新款列表
					sell: {page: 0, list: []}//精选列表
				},
				currentType: 'pop',//默认激活列表
				
				tabOffsetTop: 0,//标签导航栏离顶部距离
				isTabFixed: false,//标签导航栏是否固定在顶部
				saveY: 0,//当前滚动高度
				
			}
		},
		computed: {
			// 显示的商品列表
			showGoods() {
				return this.goods[this.currentType].list
			}
		},
		created() {
			// 请求多个数据
			this.getHomeMultiData()

			// 请求商品列表数据
			this.getHomeGoods('pop')
			this.getHomeGoods('new')
			this.getHomeGoods('sell')

			
		},
		mounted() {
			//*********mixin代码块************* */

			// const refresh = debounce(this.$refs.scroll.refresh,50)
			// this.itemImgListener = () => {
					// 修复滚动区域bug: 滚动区域高度不正确,滚动过程中卡顿，不够丝滑
					// 问题：当图片数据加载较慢时，better-scroll获取的滚动高度未包含图片的高度
					// 解决：
					// 在每一张图片加载完毕后，使用事件总线$bus中$emit发射事件，$on接收事件，执行一次refresh()
					// refresh()
					// console.log(this.$refs.scroll.scroll.scrollerHeight)
				// }

			// 监听goods的item里图片加载完成
			// this.$bus.$on('itemImageLoad',this.itemImgListener)

			//*********mixin代码块************* */
		},
		activated() {
			this.$refs.scroll.scrollTo(0,this.saveY,0)//回到离开时的位置
			this.$refs.scroll.refresh()
		},
		deactivated() {
			this.saveY = this.$refs.scroll.getScrollY()//离开记录当前位置

			// 取消全局事件监听（mixin图片加载处理）
			this.$bus.$off('itemImageLoad',this.itemImgListener)
		},
		methods: {
			//*******mixin代码块************ */

				//backTopMixin回到顶部

			//*******mixin代码块*********** */



			// 接收来自标签导航栏相对应标签index
			tabClick(index) {
				switch(index) {
					case 0:
						this.currentType = 'pop'
						break
					case 1:
						this.currentType = 'new'
						break
					case 2:
						this.currentType = 'sell'
						break
				}
				// bug解决-隐藏的标签导航栏和显示的标签导航栏活跃的分类不一致，让它们currentindex相等
				this.$refs.tabControlFaker.currentIndex = index
				this.$refs.tabControl.currentIndex = index
			},
			
			// 接收来自scroll组件的position
			contentScroll(position) {
				this.listenShowBackTop(position);//（mixin回到顶部）
				this.isTabFixed = -position.y > this.tabOffsetTop?true:false;
			},
			
			// 加载更多
			loadMore() {
				this.getHomeGoods(this.currentType)
			},
			// 轮播图加载完毕，动态获取标签导航栏离顶部距离
			swiperImageLoad() {
				// console.log(this.$refs.tabControl,'1')
				this.tabOffsetTop = this.$refs.tabControl.$el.offsetTop
			},

			/*
			*网络请求相关
			*/
			getHomeMultiData() {
				getHomeMultiData().then(res => {
					console.log(res);
					// 函数销毁前保存
					this.banners = res.data.banner.list;
					this.recommends = res.data.recommend.list;
				})
			},
			getHomeGoods(type) {
				const page = this.goods[type].page + 1;//获取第几页数据

				getHomeGoods(type,page).then(res => {
					this.goods[type].list.push(...res.data.list);
					this.goods[type].page += 1;

					// 某类别某页数据加载完毕，执行finishPullUp
					this.$refs.scroll.finishPullUp()
				})
			}
		}
	}
</script>

<style scoped>
	#home {
		/* padding-top: 44px; */
		height: 100vh;
	}

	.home-nav {
		background-color: var(--color-tint);
		color: #fff;
	}
	.content {
		height: calc(100% - 98px);/*减号左右加空格 */
		overflow: hidden;
	}

	.tab-control-faker {
		position: fixed;
		top: 44px;
		left: 0;
		right: 0;
		z-index: 9;
	}
</style>